<template>
  <div class="trip_strategy">
    <!-- 旅游攻略城市菜单栏部分 开始 -->
    <div class="trip_sidebar">
      <sidebar @menuListCity="menuListCity" />
      <!-- 搜索框 开始 -->
      <search :city="city" @btnSearch="btnSearch" @recommendSearch="recommendSearch" />
      <!-- 搜索框 结束 -->
    </div>
    <!-- 旅游攻略城市菜单栏部分 结束 -->

    <!-- 旅游攻略内容部分 开始 -->
    <div class="trip_content">
      <!-- 轮播图部分 开始 -->
      <div class="carousel">
        <carousel />
      </div>
      <!-- 轮播图部分 结束 -->
      <!-- 文章内容部分 开始 -->
      <div class="post_content">
        <div class="pagecon" v-if="!loading">
          <postList :post="pageList" />
        </div>
        <div class="emptyShow" v-if="!loading&&currentPageList.length<=0">还没有相关城市攻略哦，快去发布一篇吧~</div>
        <div class="loadingCon" v-if="loading" v-loading="loading" element-loading-text="拼命加载中"></div>
      </div>
      <!-- 文章内容部分 结束 -->

      <!-- 分页部分 开始 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[3, 5, 10, 15]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
      <!-- 分页部分 结束 -->
    </div>
    <!-- 旅游攻略内容部分 结束 -->
  </div>
</template>


<script>
import sidebar from "../../components/post/tripSidebar";
import carousel from "../../components/post/tripCarousel";
import postList from "../../components/post/tripPostList";
import search from "../../components/post/tripSearch";
export default {
  components: {
    sidebar,
    carousel,
    postList,
    search,
  },
  data() {
    return {
      loading: true,
      postList: [], // 文章列表数据
      currentPage: 1, // 当前默认页面
      pageSize: 3, // 每页显示几条
      total: 0, // 总数居
      city: "", // 储存菜单点击搜索的城市
      currentPageList: [],
    };
  },
  computed: {
    pageList() {
      // 分页数据的计算
      const arr = this.postList.filter((v, index) => {
        // 计算开始的页数
        const start = (this.currentPage - 1) * this.pageSize;
        // 计算结束的页数
        const end = this.currentPage * this.pageSize;
        if (index >= start && index < end) {
          return true;
        } else {
          return false;
        }
      });
      this.currentPageList = arr;
      return arr;
    },
  },
  methods: {
    // 菜单列表城市
    menuListCity(city) {
      // console.log(city)
      this.city = city;
      this.init(city);
    },
    // // 推荐的城市
    recommendSearch(city) {
      // 每次搜索都先把本地的页码缓存清除，并且初始化页码
      this.currentPage = 1;
      localStorage.removeItem("currentPage");
      localStorage.removeItem("currentSize");
      console.log(city);
      this.init(city);
    },
    // // 搜索功能
    btnSearch(city) {
      // console.log(city);
      // 每次搜索都先把本地的页码缓存清除，并且初始化页码
      this.currentPage = 1;
      localStorage.removeItem("currentPage");
      localStorage.removeItem("currentSize");
      // console.log(city);
      // 判断是否有输入城市
      if (!city) {
        this.init();
      } else {
        this.init(city);
      }
    },
    // 设置每一页几条
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.currentPage = 1;
      this.watchPage(this.$route.query.city);
    },
    // 设置当前页
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      console.log(`this.currentPage改变触发handleCurrentChange`);
      this.currentPage = val;
      this.watchPage(this.$route.query.city);
    },
    // 根据url的参数初始化elemntUI的分页组件页码样式
    initPager() {
      // 如果参数存在我才初始化
      if (this.$route.query.currentPage && this.$route.query.size) {
        if (this.$route.query.currentPage == "NaN") {
          this.currentPage = 1;
          this.pageSize = 3;
        } else {
          this.currentPage = +this.$route.query.currentPage;
          this.pageSize = +this.$route.query.size;
        }
      }
    },
    // 给url地址栏拼接当前分页和城市参数
    watchPage(city) {
      // this.pageSize =
      // 计算开始的页数
      if (city) {
        this.$router.push({
          path: `/post?city=${city}&currentPage=${this.currentPage}&size=${this.pageSize}`,
        });
        // 因为push是异步执行，我们需要把下面的代码放入定时器才能获取到值！
        setTimeout(() => {
          // console.log(
          //   `将${this.$route.query.currentPage},${this.$route.query.size}存到localstorage`
          // );
          localStorage.setItem("currentPage", this.$route.query.currentPage);
          localStorage.setItem("currentSize", this.$route.query.size);
        }, 200);
      } else {
        this.$router.push({
          path: `/post?currentPage=${this.currentPage}&size=${this.pageSize}`,
        });
        setTimeout(() => {
          // console.log(
          //   `将${this.$route.query.currentPage},${this.$route.query.size}存到localstorage`
          // );
          localStorage.setItem("currentPage", this.$route.query.currentPage);
          localStorage.setItem("currentSize", this.$route.query.size);
        }, 200);
      }
    },

    // 获取文章数据
    init(city) {
      this.loading = true;
      this.watchPage(city);
      // console.log(city);
      this.$axios({
        url: "/posts",
        method: "get",
        params: {
          city,
        },
      }).then((res) => {
        this.loading = false;
        // console.log(res);
        const { data } = res.data;
        this.postList = data;
        this.total = res.data.total;
      });
    },
  },
  beforeDestroy() {
    localStorage.removeItem("currentPage");
    localStorage.removeItem("currentSize");
  },
  mounted() {
    let curPage = localStorage.getItem("currentPage");
    let curSize = localStorage.getItem("currentSize");

    if (curPage && curSize) {
      this.currentPage = +curPage;
      this.pageSize = +curSize;
    }
    console.log(this.currentPage, this.pageSize);
    let city = this.$route.query.city;
    this.city = city;
    // this.watchPage(city);
    // 获取文章数据
    this.init(city);
  },
  // 初始化修改分页组件页码样式，只有在created方法中调用它才会生效！
  // 因此我们初始化修改对应的页码需要将代码写在created中
  // 即：我们需要在created之后刷新这个分页组件或者让分页组件的html后于created之后加载到页面
  created() {
    this.initPager();
  },
};
</script>


<style lang="less" scoped>
.trip_strategy {
  width: 1000px;
  margin: 0 auto;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  // 城市菜单栏
  .trip_sidebar {
    width: 260px;
  }
  // 内容部分
  .trip_content {
    width: 700px;
    .carousel {
      cursor: pointer;
      margin-bottom: 20px;
    }
  }
  .loadingCon {
    margin-top: 0px;
    padding-bottom: 500px;
  }
  .emptyShow {
    font-size: 30px;
    font-weight: 500;
    background: #f2f2f2;
    text-align: center;
    line-height: 300px;
  }
}
</style>